<template>
  <nav>
    <ul class="nav">
      <li
        :class="{'nav-item':true,'nav-active':navIndex == item.id}"
        v-for="(item,index) in navlist"
        :key="index"
        @click="change(item.id)"
      >{{item.name}}</li>
    </ul>
  </nav>
</template>
<script>
import { Util } from "@/assets/commonjs/utils.js";
export default {
  name: "order-item",
  props: {
    navlist: {
      type: Array,
      default() {
        return [
          {
            id: 0,
            name: "全部"
          },
          {
            id: 1,
            name: "已创建"
          },
          {
            id: 2,
            name: "待处理"
          },
          {
            id: 3,
            name: "已完成"
          }
        ];
      }
    },
    start: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  mounted() {
    this.navIndex = this.start || 0;
  },
  data() {
    return {
      navIndex: 0
    };
  },
  methods: {
    change(id) {
      this.navIndex = id;
      this.$emit("change", id);
    }
  }
};
</script>

<style scoped lang="less">
@import "~link-less";
.nav {
  .display-flex();
  // height: 88px;
  // line-height: 88px;
  align-items: center;
  padding: 10px 0 0;
  justify-content: space-between;
  background-color: #fff;
  color: #666;
  font-size: 32px;
  border-radius: 8px;
  border-bottom: 1px solid #eee;
  .nav-item {
    flex: 1;
    text-align: center;
    // overflow: hidden;
    // text-overflow:ellipsis;
    // white-space: nowrap;
    // height: 100%;
    padding: 20px;

    // background-color: @easy-black;
    // border-right: 1px solid @deep-black;
    &:first-child {
      // border-top-left-radius: 8px;
      // border-bottom-left-radius: 8px;
    }
    &:last-child {
      // border-top-right-radius: 8px;
      // border-bottom-right-radius: 8px;
    }
  }
  .nav-active {
    color: #4EB6AD;
    position: relative;
    // border-bottom: 1px solid #4EB6AD;
    // background-color: @primary-color;
    &::before{
      content: '';
      height: 4px;
      width: 64px;
      position: absolute;
      bottom: 0;
      left: 61.75px;
      background-color: #4EB6AD;

    }
  }
}
</style >

